<template>
  <div class="roleManage">
    <el-button class="AddRole" size="small" icon="el-icon-plus" type="primary" @click="showDialog = true">新增角色</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80" />
      <el-table-column align="center" prop="name" label="角色名" width="140" />
      <el-table-column align="center" prop="description" label="描述" />
      <el-table-column align="center" prop="address" label="操作" width="160">
        <template v-slot="{ row }">
          <el-link type="primary" @click="assignPermission(row.id)">分配权限</el-link>
          <el-link style="margin:0 10px;" type="primary" @click="doEdit(row.id)">修改</el-link>
          <el-link type="primary" @click="doDel(row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background :current-page.sync="pageInfo.page" :page-size="pageInfo.pagesize" :total="pageInfo.total" layout="total, prev, pager, next" @current-change="changePage" />
    <AddRole ref="addRole" :show-dialog.sync="showDialog" @reload="reload" />
    <el-dialog title="分配权限" :visible.sync="showPerDialog" :show-close="false" @close="close">
      <el-tree ref="tree" check-strictly node-key="id" :data="treeData" default-expand-all :props="props" :default-checked-keys="checkList" show-checkbox />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" @click="saveRole">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, deleteRole, getRoleDetail, updataRole } from '@/api/roles'
import { getPermissionList } from '@/api/permission'
import { arrayToTree } from '@/utils'
import AddRole from './AddRole.vue'

export default {
  components: {
    AddRole
  },
  data() {
    return {
      pageInfo: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      currentRole: {},
      tableData: [],
      treeData: [],
      checkList: [],
      props: {
        label: 'name'
      },
      showDialog: false,
      showPerDialog: false
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    changePage() {
      this.loadData()
    },
    async loadData() {
      const res = await getRoleList(this.pageInfo)
      this.tableData = res.data.rows
      this.pageInfo.total = res.data.total
    },
    doDel(row) {
      this.$confirm(`确定要删除 ${row.name} 这名角色吗？`, '删除角色', {
        center: true,
        closeOnClickModal: false,
        showClose: false,
        type: 'info'
      }).then(async() => {
        await deleteRole(row.id)
        if (this.tableData.length === 1 && this.pageInfo.page !== 1) this.pageInfo.page--
        this.loadData()
      }).catch(() => {})
    },
    reload() {
      this.pageInfo.total++
      this.pageInfo.page = Math.ceil(this.pageInfo.total / this.pageInfo.pagesize)
      this.loadData()
    },
    doEdit(id) {
      this.showDialog = true
      this.$refs.addRole.getDetail(id)
    },
    async assignPermission(id) {
      const result = await getPermissionList()
      this.treeData = arrayToTree(result.data, '0')
      const roleResult = await getRoleDetail(id)
      this.currentRole = roleResult.data
      this.checkList = roleResult.data.permIds
      this.showPerDialog = true
    },
    close() {
      this.checkList = []
      this.showPerDialog = false
    },
    async saveRole() {
      this.currentRole.permIds = this.$refs.tree.getCheckedKeys()
      await updataRole(this.currentRole)
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.roleManage {
  .AddRole {
    margin-bottom: 20px;
  }
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
  ::v-deep .el-dialog {
    border-radius: 10px;
    .el-dialog__header {
      background: linear-gradient(to right, #3e6ef8, #5b8cff);
      border-radius: 10px 10px 0 0;
    }
    .el-dialog__body {
      text-align: center;
    }
  }
}
</style>
